La base du HTML : Exemple :
Exemple :
Ici, le <br> a été placé après la phrase "Première ligne".
Exemple :
Deuxième ligne
Remarquez que l'espace est plus grand si on le compare au <br>.
Exemple :
Exemple :
Exemple :
Exemple :
Exemple :
Exemple :
Vous pouvez écrire, par exemple, h2 ou h3. Cela fera changer la taille du texte comme vous pouvez le voir ci-dessus.
Exemple :
Vous pouvez écrire size=2 également.
Exemple :
Exemple :
Bien sûr, cet exemple est pris à partir d'une adresse internet de mon site. Il vous suffira
juste à changer l'adresse (<a href=l'adresse choisie>).
Exemple :
Exemple :
Le HTML est la source de plusieurs sites web. Pour voir le HTML d'une page comme
celle-ci, cliquez sur "Affichage" et ensuite sur "source". Le code se montrera
en .txt (Bloc-notes / Notepad). Pour sauver du temps sur l'internet si vous voulez
créer un site, écrivez le code AVANT dans un fichier bloc-notes et ensuite, vous n'aurez
qu'à faire un "copier-coller" de votre travail.
<html> et </html> - la première et la dernière chose qui apparait dans le code
<title> et </title> - Vous devez retrouver ceci après le premier "html".
Cela va vous permettre d'écrire un titre sur la bordure du haut de la fenêtre (Par exemple, ici,
le titre du haut est "L E H T M L". On écrit le titre entre les deux "title".)
<body> et </body> - Le premier <body> doit aller tout de suite après le "TITLE"
et le deuxième doit être placé à la fin. TOUT LE CODE EST PLACÉ ENTRE LES DEUX "BODY".
<title>L E H T M L</title>
<body>
(...le code pour la future page va ici...)
</body>
</html>
Commencer une nouvelle ligne de texte :
Tapez après la ligne désirée :
<br>
Première ligne
Deuxième ligne
Séparer des paragraphes, des photos... ... ...
Écrivez <p> après la phrase, la photo... désirée
Première ligne
Centrer (texte, images, etc.):
<center>Centre-moi!!</center>
Mettre une ligne pour séparer :
Écrivez ce code : <hr> entre les deux parties à séparer
Première partie
Début de la deuxième partie
Écrire en italique :
<i>Le texte va ici, entre les eux "i"</i>
Le texte va ici, entre les eux "i"
Écrire en caractère gras :
<b>Le texte bla bla...</b>
Le texte bla bla...
Souligner le texte :
<u>Souligne la ligne de texte</u>
Souligne la ligne de texte
Aggrandir le texte :
<:h1>Taille</h1>
Taille 3
Taille 2
Taille 1
Rétrécir le texte :
<font size=1>Taille 1</font>
Taille 1
Taille 2
Écrire en caractère de clavier (comme une machine à écrire) :
<kbd>Le texte va ici megnemegne!</kbd>
Le texte va ici megnemegne!
Faire un lien dans VOTRE site :
<a href=http://the_rbo.tripod.com/photos/photos.html>Photos de RBO</a>
Photos de RBO
Faire un lien vers UN AUTRE site :
<a href=http://www.geocities.com/yvesponline/>Yves P. Online!</a>
Yves P. Online!
Pour que l'on puisse vous écrire un e-mail :
<a href=mailto:y_woman@beatlegirl.com>Contactez-moi!</a>
Contactez-moi!
Créer un lien dans une même page :
Bon, je m'explique. Lorsque l'on fait une looooongue page, il est
préférable de mettre des liens qui dirige le visiteur dans les différentes
sections de la page. À la place de descendre la page indéfiniment, le
visiteur n'a qu'à cliquer sur la section qu'il veut et il est dirigé vers
cette section (c'est ce que j'ai fait au tout début de cette page). Si vous
voulez voir un autre exemple de ce que j'essaie d'expliquer, allez
dans la partie Albums.
Sélectionnez l'album de votre choix. Cliquez ensuite sur une des
chansons (surlignée et écrite en jaune) et vous serez amené automatiquement
aux paroles de la chanson qui sont inclues DANS LA MÊME PAGE. Oof... C'est
facile quand on a compris, mais à expliquer...!
Donc à chaque début de section où vous voulez créer un lien (exemple :
au début des paroles d'une chanson), écrivez :
<a name=inventez_un_nom_qui_correspond_a_votre_section_ici>
et écrivez le texte de la section après (le nom après le "a name" ne doit pas comprendre
d'espaces.).
Pour finir, écrivez le nom des sections dont vous voulez faire un lien au
début de la page, de préférence. Tapez ceci :
<a href=#écrivez_le_meme_nom_qui_correspond_a_votre_section_ici>Nom de la section</a>.
Oui, le petit # doit être placé après le "a href"!
Exemple :
Pour voir un exemple, cliquez ici
Vous devez mettre ce code au début, à côté des autres codes sur les couleurs, si possible (voir "Pour changer la couleur du fond, du texte et des liens").
Exemple :
Vous devez écrire le code au début du paragraphe où vous voulez placer l'image
(ici, j'ai placé le code avant le "vous").
Remarquez que le texte est collé sur la photo et non écrit en-dessous de la photo.
C'est pourquoi il y a la partie "align" dans le code. "Align" permet à la photo de
se placer dans le texte. Ici, j'ai écrit "left" à côté du align pour mettre ma photo
à gauche. J'aurais pu écrire "right". Voici un exemple de la même photo mise à droite...
Blablablablablablablablablablablablablablablablablabla...
Vous devez écrire le code au début du paragraphe où vous voulez placer l'image
(ici, j'ai placé le code avant le "vous").
Remarquez que le texte est collé sur la photo et non écrit en-dessous de la photo.
C'est pourquoi il y a la partie "align" dans le code. "Align" permet à la photo de
se placer dans le texte. Ici, j'ai écrit "right" à côté du align pour mettre ma photo
à droite. J'aurais pu écrire "left". L'exemple de la photo mise à gauche est en haut...
Blablablablablablablablablablablablablablablablablabla...
Voici ce que cela donnerait si on enlevait la partie "align=" :
Comme vous le voyez, sans le "align", la première phrase est située en bas de la
photo au lieu d'en haut. C'est franchement fatiguant à regarder, sans blagues!
Exemple :
Avec écriture :
écrivez quelque chose ici si vous le voulez
Sans écriture :
À la place d'utiliser des mots pour faire un lien, on peut aussi utiliser une image (une bannière ou une flèche qui mène à l'introduction d'un site web, par exemple.).
Si vous ne voulez pas de bordure autour de la photo, ajoutez ceci : <border=0>
après le "img src" :
<img src=rbotete.gif border=0>
Exemple :
Exemple (cliquez sur la photo):
C'est une bonne méthode à utiliser lorsque vous avez beaucoup de photos à afficher sur une page. Celle-ci sera donc moins longue à s'afficher.
Exemple (ici, j'ai aggrandi la photo):
<img src=rbocibloreilles.jpg height=50>
Exemple (ici, j'ai rétréci la photo):
Je n'ai pas de trucs pour savoir quel chiffre écrire si vous voulez une grande ou une petite photo. Je fais toujours un test avec un chiffre pris au hasard et ensuite, je modifie le chiffre si c'est nécessaire.
Exemple (laissez votre souris sur la photo):
Il faut ABSOLUMENT mettre les " " entre le début et la fin du message sinon vous n'aurez que le premier mot d'affiché (ici, seul le mot "Ta" serait affiché si je n'aurais pas mis les guillemets.).
Pour voir un exemple, cliquez ici
(Je ne peux pas vous montrer cet exemple sur cette page, parce
que sinon les couleurs de ma page en seront affectées)
"bg color" veut dire "background color" ou "couleur du fond".
"text" veut dire "la couleur du texte".
"link" veut dire "la couleur des liens" et "vlink", "viewed link" ou "la
couleur des liens lorsque ceux-ci ont été cliqué par la souris..."
Cliquez ici pour savoir le code de chaque couleur... c'est trrrrrrès pratique!
Exemple :
Nouvelle couleur jaune
Ceci est suggéré lorsque vous voulez changer une petite partie de la couleur du texte. Cliquez ici pour savoir le code de chaque couleur.
Exemple :
(Le dernier est un exemple pour montrer que l'on peut faire une liste à points avec des liens.)
Exemple :
Bravenet
Ce site offre plusieurs petites choses utiles et agréables (compteurs, guestbook, chambre pour le chat...). J'ADORE!
J'ai écrit cette page pour aider le monde à faire des sites sans trop de
difficultés, mais aussi pour aider mon amie Mélanie qui veut faire un site
sur notre cher George Harrison, décédé en novembre dernier. Bonne chance
Mélanie!
George Harrison, 1943-2001
Voici son site!
2001, evelyne lessard